

<template>
  <div class="page-wrap">
    <!-- <pk-header></pk-header> -->
    <!-- <pk-scroll :loading="pageloading" :isEnd="isEnd"  @scrolltolower="scrolltolower"> -->
      <div class="page-wrap-content pt-24">
        <div class="page-wrap-searchbox flex-row mb-12">
          <div class="page-wrap-searchboxinput">
            <pk-input placeholder="请输入分身名称" v-model="keyword" :prefix-icon="Search" size="large" :circle="true" @change="onSearchChange"></pk-input>
          </div>
          <div class="page-wrap-searchboxadd ml-12"> 
            <pk-button type="default" size="large" :icon="Plus" round @click="createSpare">创建分身</pk-button>
          </div>
        </div>
        <div class="page-wrap-itembox">
          <!-- <div class="page-wrap-item">
            <div class="page-goodnew" @click="createSpare" v-loading="cloading" element-loading-text="创建分身中...">
              <div class="page-goodnew-add">
                <el-icon size="30" color="#888"><Plus /></el-icon>
              </div>
              <div><el-button>创建我的分身</el-button></div>
            </div>
          </div> -->
          <div class="page-wrap-item" v-for="(item,index) in list" :key="index">
            <pk-good :data="item" @onCall="onCall(item)">
              <div class="flex-row align-items-center justify-center mt-12">
                <div class=" f-12 gray-color flex-1">
                  同步至数字分身 <el-switch v-model="item.isTrue" :loading="item.loading" @change="onChange(item)" size="small"/>
                </div>
                <div class="f-12 ml-8" style="height: 16px">
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="同步至数字分身后，意味着平台所有用户都可以看到和使用"
                    placement="top"
                  >
                    <el-icon size="14" color="#999"><Warning /></el-icon>
                  </el-tooltip>
                </div>
              </div>
            </pk-good>
          </div>
        </div>
      </div>
      <div class="page-wrap-footer">
        <pk-page :total="total" @onSize="onSize"></pk-page>
      </div>
    <!-- </pk-scroll>  -->
    <pk-qrcode :data="curData" :channelId="curData.agent_id" v-if="linkShow" @onClose="linkShow=false"></pk-qrcode>
    <createspare v-if="parseShow" :data="createUser" @updateSpare="updateSpare" @onClose="parseShow=false" :loading="loading"></createspare>
  </div>
</template>

<script setup>
  import { ref, onMounted  } from 'vue'
  import { agentGetMyList, agentCreate, agentRelease, agentUpdate } from '@/api/api'
  import pkHeader from '@/components/header/header.vue'
  import pkGood from './component/item.vue'
  // import pkGood from '@/components/pkui/pkgood/pkgood.vue'
  import pkInput from '@/components/pkui/pkinput/pkinput.vue'
  import pkButton from '@/components/pkui/pkbutton/pkbutton.vue'
  import pkPage from '@/components/pkui/pkpage/pkpage.vue'
  import pkQrcode from '@/components/pkui/pkqrcode/pkqrcode.vue'
  import createspare from '@/components/createspare/createspare.vue'
  import pkScroll from '@/components/pkui/pkscroll/pkscroll.vue'
  import { Plus, Search, Warning } from '@element-plus/icons-vue'
  import { getToken, setKeyItem, getKeyUserInfo} from '@/utils/auth'
  import { ElMessage } from 'element-plus'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const userinfo = ref({})
  const cloading = ref(false)
  const list = ref([])
  const page = ref(1)
  const linkShow = ref(false)
  const total = ref(1)
  const parseShow = ref(false)
  const pageloading = ref(false)
  const isEnd = ref(false)
  const loading = ref(false)
  const curData = ref({}) 
  const createUser = ref({})
  const keyword = ref('')
  const getList = () => {
    pageloading.value = true
    agentGetMyList({
      page: page.value,
      keyword: keyword.value
    }).then(res => {
      total.value = res.data.total  
      setTimeout(() => {
        pageloading.value = false
        if (res.data.list.length == 0) {
          isEnd.value = true
        } 
        if(res.data.list.length > 0){
          list.value = res.data.list.map(item => {
            return {
              ...item,
              isTrue: item.is_public == 1 ? true : false,
              loading: false
            }
          })
        } 
      }, 500)  
    }).catch(() => {
      pageloading.value = false
    })
  } 

  const onCall = (e) => {
    if (!getToken()) {
      counterStore.SETLOGINSHOW(true)
    } 
    curData.value = e
    linkShow.value = true 
  }

  const onSize = (e) => {
    page.value = e
    getList()
  }


  const onSearchChange = () => {
    getList()
  }

  const onChange = (e) => {
    e.loading = true
    let flag = e.is_public == 1 ? 0 : 1
    agentRelease({
      agent_id: e.agent_id,
      is_public: flag
    }).then(res => {
      e.loading = false
      e.is_public = flag
      e.isTrue = flag==1 ? true : false 
      // page.value = 1
      // list.value = []
      // getList()
    }).catch(err => {
      e.loading = false 
    })
  }

  const updateSpare = async (data) => {
    loading.value = true
    agentUpdate(data).then(res => {
      isEnd.value = false
      loading.value = false
      parseShow.value = false
      page.value = 1
      list.value = []
      getList()
    }).catch(err => {
      loading.value = false
    })
  }

  const createSpare = () => {
    router.push({
      path: '/myAgentsitem'
    })
  }

  const scrolltolower = () => {
    page.value = page.value + 1
    getList()
  }

  onMounted(() => {
    list.value = []
    if (getToken()) {
      getList() 
    } 
  })
</script>
<style lang="scss" scoped>
  .page-wrap{
    padding-top: 52px;
    height: calc(100vh - 52px);
    overflow-y: auto;
    &-menu{
      background: #fff;
    }
    &-content{
      margin: 0 auto;
      width: 996px;
    }
    &-searchboxinput{
      width: 240px;
    }
    &-item{
      width: 240px;
      margin-right: 12px;
      margin-bottom: 12px;
    }
    &-item:nth-child(4n){
      margin-right: 0px!important;
    }
    &-itembox{
      display:flex;
      flex-direction: row;
      flex-wrap: wrap;
    } 
    &-footer{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40px;
      padding-bottom: 40px;
    }
  }

  .page-goodnew{
    padding: 11px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0px 0px 0px 1px rgb(140 140 140 / 0.2);
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    cursor: pointer;
    height: 336px;
    overflow: hidden;
    &-add{
      width: 60px;
      height: 60px;
      border-radius: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
</style>
